<template>
    <div class="correctHomework">
        <div class="titlebox">
            批改作业
        </div>


        <div class="screen_content">
            <div class="title">
                筛选
            </div>

            <div>
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="班级：">
                        <el-input v-model="formInline.user" placeholder="请选择"></el-input>
                    </el-form-item>
                    <el-form-item label="年级：">
                        <el-select v-model="formInline.region" placeholder="请选择">
                            <el-option label="区域一haha" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="学生姓名：">
                        <el-input v-model="formInline.studentName" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="时间：">
                        <el-input v-model="formInline.time" placeholder="请选择"></el-input>
                    </el-form-item>
                    <el-form-item label="提交情况：">
                        <el-input v-model="formInline.time" placeholder="请选择"></el-input>
                    </el-form-item>
                    <el-form-item label="批改状态：">
                        <el-select v-model="formInline.region" placeholder="请选择">
                            <el-option label="区域一haha" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <div class="btnBox">
                            查询
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="workList">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="index" label="序号" min-width="10%">
                </el-table-column>
                <el-table-column prop="student" label="学生" min-width="30%">
                    <template slot-scope="scope">
                        <div class="userInfo">
                            <img class="avatatimg" src="@/static/image/logo.png" alt="" srcset="">
                            <div>{{ scope.row.student }}</div>
                        </div>
                    </template>

                </el-table-column>
                <el-table-column prop="grade" label="班级" min-width="30%">
                </el-table-column>
                <el-table-column prop="class" label="年级" min-width="20%">
                </el-table-column>
                <el-table-column prop="Submittime" label="提交时间" min-width="30%">
                </el-table-column>
                <el-table-column prop="submitStatus" label="提交状态" min-width="20%">
                    <template slot-scope="scope">
                        <div v-if="scope.row.submitStatus == 0" style="color:#4BA840;">已提交</div>
                        <div v-if="scope.row.submitStatus == 1" style="color:#1DD2BC;">已订正</div>
                        <div v-if="scope.row.submitStatus == 2" style="color:#4BA840;">未订正</div>
                        <div v-if="scope.row.submitStatus == 3" style="color:#E63939;">未提交</div>
                    </template>
                </el-table-column>
                <el-table-column prop="correctDtatus" label="批改状态" min-width="20%">
                    <template slot-scope="scope">
                        <div v-if="scope.row.correctDtatus == 0" style="color:#4BA840;">已批改</div>
                        <div v-if="scope.row.correctDtatus == 1" style="color:#E63939;">为批改</div>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="操作">
                    <template slot-scope="scope">
                        <div class="handleitem">
                            <div class="item_s" style="color:#1DD2BC;">编辑</div>
                            <div class="item_s" style="color:#1DD2BC;" @click="handleHomeworkDetail(scope)">查看</div>
                            <div class="item_s" style="color:#3FB9E2;">批改作业</div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="currentPage2" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                    layout="sizes, prev, pager, next" :total="1000">
                </el-pagination>
            </div>
        </div>

    </div>
</template>
<script>
export default {
    data() {
        return {
            formInline: {
                user: '',
                region: '',
                studentName: '',
                time: "",
            },
            tableData: [{
                student: '妍与韩',
                grade: '一二阶教学部',
                class: '三年级',
                Submittime: "2024/12/12  12:00",
                submitStatus: 0,
                correctDtatus: 0,
                avatar: "@/static/image/logo.png"
            }, {
                student: '妍与韩',
                grade: '一二阶教学部',
                class: '三年级',
                Submittime: "2024/12/12  12:00",
                submitStatus: 1,
                correctDtatus: 1,
                avatar: "@/static/image/logo.png"

            }, {
                student: '妍与韩',
                grade: '一二阶教学部',
                class: '三年级',
                Submittime: "2024/12/12  12:00",
                submitStatus: 2,
                correctDtatus: 0,
                avatar: "@/static/image/logo.png"

            }, {
                student: '妍与韩',
                grade: '一二阶教学部',
                class: '三年级',
                Submittime: "2024/12/12  12:00",
                submitStatus: 3,
                correctDtatus: 1,
                avatar: "@/static/image/logo.png"

            }],
            currentPage2: 5,
        }
    },
    created() {

    },
    mounted() {

    },
    methods: {
        handleHomeworkDetail(){
            this.$router.replace({ name: 'homeworkDetail' })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }

    }
}
</script>
<style scoped lang="scss">
.correctHomework {
    padding: 20px;
    box-sizing: border-box;

    .titlebox {
        font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
        font-weight: 500;
        font-size: 14px;
        color: #5C5C5C;
        line-height: 16px;
    }

    .screen_content {
        width: 100%;
        // height: 102px;
        background: #FFFFFF;
        border-radius: 4px 4px 4px 4px;
        margin-top: 16px;
        padding: 16px;
        box-sizing: border-box;

        ::v-deep .el-input {
            width: 179px;
            height: 35px !important;
        }

        ::v-deep .el-input .el-input__inner {
            width: 179px;
            height: 35px !important;
            border-radius: 4px 4px 4px 4px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            line-height: 14px;
        }

        .title {
            font-family: PingFang SC, PingFang SC;
            font-weight: 550;
            font-size: 16px;
            color: #333333;
            line-height: 19px;
            text-align: left;
            margin-bottom: 10px;
        }

        .btnBox {
            width: 80px;
            height: 40px;
            background: #4BA840;
            border-radius: 4px 4px 4px 4px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #FFFFFF;
            line-height: 40px;
            text-align: center;
            cursor: pointer;
        }
    }

    .workList {
        width: 100%;
        height: 589px;
        background: #FFFFFF;
        border-radius: 4px 4px 4px 4px;
        margin-top: 16px;
        padding: 20px;
        box-sizing: border-box;
        position: relative;

        .userInfo {
            display: flex;
            align-items: center;

            .avatatimg {
                width: 40px;
                height: 40px;
                margin-right: 10px;
            }
        }


        .handleitem {
            display: flex;
            align-items: center;

            .item_s {
                margin-right: 10px;
                cursor: pointer;
            }
        }

        ::v-deep .el-input {
            width: 100px !important;
            height: 35px !important;
        }
        .pagination{
            position: absolute;
            bottom: 30px;right: 30px;
        }
    }
}

::v-deep .el-input__inner:active {
    border: 1px solid #4BA840;
}

::v-deep .el-input__inner:focus {
    border: 1px solid #4BA840;
}

::v-deep .el-select .el-input.is-focus .el-input__inner {
    border: 1px solid #4BA840;
}

::v-deep .el-form-item__label {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #777777;
    padding: 0;
    line-height: 25px;
}

::v-deep .el-form-item__content {
    line-height: 20px;
}

::v-deep .el-input__icon {
    line-height: 25px;
}



::v-deep .el-select .el-input .el-select__caret {
    font-size: 12px !important;
}

::v-deep .el-pager li.active {
    color: #4BA840 !important;
}

::v-deep .el-pager li.hover {
    color: #4BA840 !important;
}
</style>
